<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../../../css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>昵称:</label>
					<input id='nick' name="nickname" type="text" class="mui-input-clear mui-input" placeholder="请输入昵称">
				</div>
				<div class="mui-input-row">
					<label>账号:</label>
					<input id='account' name="account" type="text" class="mui-input-clear mui-input" placeholder="电话号码或邮箱">
				</div>
				<div class="mui-input-row">
					<label>密码:</label>
					<input id='password' name="password" type="password" class="mui-input-clear mui-input" placeholder="8位以上数字或字母">
				</div>
				<div class="mui-input-row">
					<label>确认:</label>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
				</div>
				<!--<div class="mui-input-row">
					<label>邮箱:</label>
					<input id='email' name="email" type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">
				</div>
				<div class="mui-input-row">
					<label>电话:</label>
					<input type="tel" name="telNum" id="telNum" class="mui-input-clear mui-input" placeholder="请输入电话号码" />
				</div>-->
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
			</div>
			<div class="mui-content-padded">
				<p id="reminder"></p>
			</div>
			<a id="test" class="mui-btn">test</a>
		</div>
		<script src="../../../js/jquery.min.js"></script>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script>
			$("#account").blur(function() {
				//				var accountBox = document.getElementById('account');
				//				mui.post('http://{{.ServerHost}}:{{.ServerPort}}/regist/checkuname', {
				//					uName: accountBox.value
				//				}, function(data) {
				//					if (data.CanUse) {
				//						accountBox.style.color = 'black';
				//					} else {
				//						document.getElementById('reminder').innerText = '*该账号已存在';
				//						accountBox.style.color = 'red';
				//					}
				//				}, 'json');

			});

			document.getElementById('test').addEventListener('tap', function() {
				//	var check = /\w{4,16}/;
				var nickBox = document.getElementById('nick');
				var accountBox = document.getElementById('account');
				var regInfo = {
					account: accountBox.value,
				};
				var check = /^[0-9]*$/;
				if (regInfo.account.length != 11 || !check.test(regInfo.account)) {
					alert(check.test(regInfo.account));
				}

				alert(regInfo.account.length);
				if (nickBox.length < 2) {
					alert(123);
				}

			});
			(function($, doc) {
				$.init();

				$.plusReady(function() {
					var settings = app.getSettings();
					var regButton = doc.getElementById('reg');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var nickname = doc.getElementById('nick');


					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							nickname: nickname.value,

						};
						var passwordConfirm = passwordConfirmBox.value;
						if (passwordConfirm != regInfo.password) {
							mui.toast('密码两次输入不一致');
							return;
						}
						app.reg(regInfo, function(err) {
							if (err) {
								mui.toast(err);
								return;
							}

							mui.post('http://{{ServerHost}}:{{ServerPort}}/regist/reginfo', {
								account: regInfo.account,
								pw: regInfo.password,
								nickname: regInfo.nick,
								email: regInfo.email,
								telNum: regInfo.tel
							}, function(data) {
								if (data.result) {
									mui.toast('注册成功！');
									mui.openWindow({
										url: 'http://{{ServerHost}}:{{ServerPort}}/login',
										id: 'login',
										show: {
											aniShow: 'pop-in'
										},
										styles: {
											popGesture: 'hide'
										},
										waiting: {
											autoShow: false
										}
									});
								} else {
									mui.toast('注册失败！');
									passwordBox.value = '';
									passwordConfirmBox.validity = '';
								}
							}, 'json');
						});
					});
				});
			}(mui, document));
		</script>
	</body>

</html>